<!-- <template>
  <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="$router.back()" />
  <van-swipe-cell v-for="(item) in productgouwuche" :key="item.cartid">
    <van-card
    :num=item.num
    :price=item.originprice
    :title=item.proname
    class="goods-card"
    :thumb="item.img1"
    />
    <template #right>
      <van-button square text="删除" type="danger" class="delete-button" @click="fan(item.cartid)" />
    </template>
  </van-swipe-cell>

</template>
<script>
import { ChakanGouwucheRequset, ShanchuGouwucheRequset } from '@/api/gouwucheApi';
export default {
  data() {
    return {
      productgouwuche: [],
    }
  },
  methods: {
    fan(id) {
      ShanchuGouwucheRequset(id).then(async (res) => {
        if (res.data.code === "200") {
          let r = await ChakanGouwucheRequset();
          console.log(r.data);
          this.productgouwuche = r.data.data;
        }
      })//调用删除接口，完成删除后，重新获取数据
    }
  },
  async mounted() {
    let r = await ChakanGouwucheRequset();
    console.log(r.data);
    this.productgouwuche = r.data.data;//获取购物车数据


  }
}
</script>
<style lang="scss" scoped>
.goods-card {
  margin: 0;
  background-color: #fff;
}

.delete-button {
  height: 100%;
}

.danxuan {
  float: left;
}
</style> -->

<template>
  <div class="cart-container">
    <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="$router.back()" />
    <div class="select-all">
      <input type="checkbox" v-model="flag" @change="quanxuan" id="selectAll">
      <label for="selectAll">全选</label>
    </div>

    <ul class="cart-list">
      <li class="cart-item" v-for="item in productgouwuche" :key="item.cartid">
        <input type="checkbox" v-model="item.checked" @change="danxuan" class="cart-item-checkbox">
        <img :src="item.img1" alt="商品图片">
        <div class="item-info">
          <div class="item-name">{{ item.proname }}</div>
          <br>
          <div class="item-price">¥{{ item.originprice }}</div>
          <div class="quantity-control">
            <button @click="fn1(item.cartid)">-</button>
            <input type="text" v-model.number="item.num">
            <button @click="fn2(item.cartid)">+</button>
          </div>
          <div class="item-subtotal">¥{{ (item.originprice * item.num).toFixed(1) }}</div>
        </div>
      </li>
    </ul>

    <div class="cart-footer">
      <div>
        <span>合计：</span>
        <span class="total-price">¥{{ total.toFixed(2) }}</span>
      </div>
      <button class="checkout-btn">去结算</button>
    </div>
  </div>
</template>
<script>
import { ChakanGouwucheRequset, ShanchuGouwucheRequset } from '@/api/gouwucheApi';
export default {
  data() {
    return {
      productgouwuche: [],
      flag: false,
    }
  },
  computed: {
    total() {
      return this.productgouwuche.reduce((sum, item) => {
        return sum + (item.checked ? item.originprice * item.num : 0);
      }, 0);//reduce()方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
    },
  },//computed计算属性
  methods: {

    fn1(cartid) {
      const item = this.productgouwuche.find(item => item.cartid === cartid);
      if (item.num > 0) {
        item.num--;
        if (item.num == 0) {
          ShanchuGouwucheRequset(cartid).then(async (res) => {
            if (res.data.code === "200") {
              let r = await ChakanGouwucheRequset();
              console.log(r.data);
              if (r.data.code === "10020") {
                this.productgouwuche = [];
              } else {
                this.productgouwuche = r.data.data;
              }
            }
          }).catch(async () => {
          })//调用删除接口，完成删除后，重新获取数据
        }
      }
    },
    fn2(cartid) {
      const item = this.productgouwuche.find(item => item.cartid === cartid);
      item.num++;
    },
    quanxuan() {
      // 全选/取消全选
      this.productgouwuche.forEach(item => {
                item.checked = this.flag;
      });
    },
    danxuan() {
      // 检查是否所有项目都被选中
      this.flag = this.productgouwuche.every(item => item.checked);//every()方法用于检测数组所有元素是否都符合指定条件（通过函数提供）
    }
  },
  async mounted() {
    let r = await ChakanGouwucheRequset();
    console.log(r.data);
    if (r.data.code === "10020") {
      this.productgouwuche = [];
    } else {
      this.productgouwuche = r.data.data;//获取购物车数据
    }


  }
}
</script>
<!-- <style lang="css" scoped>
.goods-card {
  margin: 0;
  background-color: #fff;
}

.delete-button {
  height: 100%;
}

</style> -->

<style lang="css" scoped>

/* 购物车页面整体样式 */
.cart-container {
  padding-bottom: 60px; /* 给底部结算栏留空间 */
  background-color: #f7f7f7;
  min-height: 100vh;
}

/* 导航栏样式 */
.van-nav-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  /* background-color: #ff6700; */
  color: white;
}

/* .van-nav-bar__text,
.van-nav-bar .van-icon {
  color: white !important;
} */

/* 全选栏样式 */
.select-all {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  background: white;
  margin-bottom: 8px;
  font-size: 14px;
}

.select-all input[type="checkbox"] {
  margin-right: 8px;
  width: 18px;
  height: 18px;
  /* accent-color: #ff6700; 复选框选中颜色 */
}

/* 商品列表样式 */
.cart-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cart-item {
  display: flex;
  padding: 12px;
  background: white;
  margin-bottom: 8px;
  border-radius: 8px;
  align-items: center;
}

/* 复选框样式 */
.cart-item-checkbox {
  margin-right: 12px;
  width: 20px;
  height: 20px;
  /* accent-color: #ff6700; */
}

/* 商品图片样式 */
.cart-item img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 12px;
}

/* 商品信息样式 */
.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.item-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  display: -webkit-box;
  /* -webkit-line-clamp: 2; */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-price {
  font-size: 16px;
  color: #ff6700;
  font-weight: bold;
  margin-bottom: 8px;
}

/* 数量加减样式 */
.quantity-control {
  display: flex;
  align-items: center;
  margin-top: 8px;
}

.quantity-control button {
  width: 28px;
  height: 28px;
  border: 1px solid #eee;
  background: #f7f7f7;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.quantity-control input {
  width: 40px;
  height: 28px;
  border: 1px solid #eee;
  text-align: center;
  margin: 0 5px;
  font-size: 14px;
}

/* 小计样式 */
.item-subtotal {
  font-size: 16px;
  color: #ff6700;
  font-weight: bold;
  margin-top: 8px;
  text-align: right;
}

/* 底部结算栏样式 */
.cart-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

.total-price {
  font-size: 18px;
  color: #ff6700;
  font-weight: bold;
}

.checkout-btn {
  background: #ff6700;
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
}

/* 空购物车提示 */
.empty-cart {
  text-align: center;
  padding: 50px 0;
}

.empty-cart img {
  width: 120px;
  margin-bottom: 20px;
}

.empty-cart p {
  color: #999;
  font-size: 14px;
}
</style>
